<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>银行卡管理</title>
    <script src="../commonCss.js"></script>
    <script src="../commonJs.js"></script>
    <link rel="stylesheet" href="../../css/common.css">
</head>

<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <div class="ctc_title">银行卡管理</div>
    <div class="down_line"></div>
</section>

<!-- Main content -->
<section class="content" >
    <div class="row">
        <div class="col-xs-12">
            <div class="box-header">
                <form class="form-inline">
                    <div class="form-group">
                        <label>查询：</label>
                        <select id="status" class="form-control">
                            <option value="">全部</option>
                            <option value="0">已绑定</option>
                            <option value="1">已解绑</option>
                        </select>
                        <input style="width: 260px;" class="form-control" type="text" id="searchKey"  placeholder="输入卡号/银行/手机号/账号搜索"/>
                    </div>
                    <div class="form-group">
                        <button type="button"  onclick="getData()"  class="btn btn-block btn-primary">搜索</button>
                    </div>

                </form>
            </div>

            <div class="box-body" style="height:100%;">
                <table id="cardsList" class="table table-bordered table-hover" >
                    <thead>
                    <tr>
                        <th>卡号</th>
                        <th>银行名称</th>
                        <th>卡类别</th>
                        <th>持卡人</th>
                        <th>用户手机号</th>
                        <th>还款日</th>
                        <th>账单日</th>
                        <!--<th>授权邮箱</th>-->
                        <!--<th>邮箱密码</th>-->
                        <!--<th>独立密码</th>-->
                        <th colspan="2" style="width: 8%;">卡状态</th>
                        <th>添加时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody >
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>

<!-- 【查看银行卡消费记录】弹出窗内容 -->
<div class="modal" id="cardCostDialog" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static" >
    <div class="modal-dialog">
        <div class="modal-content" style="width: 180%;height: 75%;margin-left: -40%;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" align="center">银行卡消费记录列表</h4>
            </div>
            <div class="box-body" style="height:100%;">
                <table id="cardCostList" class="table table-bcardordered table-hover" >
                    <thead>
                    <tr>
                        <th>账单年月</th>
                        <th>信用卡后缀</th>
                        <th>交易日</th>
                        <th>交易时间</th>
                        <th>交易金额</th>
                        <th>交易摘要</th>
                        <th>记账日期</th>
                    </tr>
                    </thead>
                    <tbody >
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 【查看银行卡月度记录】弹出窗内容 -->
<div class="modal" id="cardMonthDialog" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static" >
    <div class="modal-dialog">
        <div class="modal-content" style="width: 180%;height: 75%;margin-left: -40%;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" align="center">银行卡月度账单列表</h4>
            </div>
            <div class="box-body" style="height:100%;">
                <table id="cardMonthList" class="table table-bcardordered table-hover;table-layout:fixed;" >
                    <thead>
                    <tr>
                        <th>账单年月</th>
                        <th>账单周期</th>
                        <th>信用额度</th>
                        <th>本期还款总额</th>
                        <th>本期最低还款额</th>
                        <th>到期还款日</th>
                    </tr>
                    </thead>
                    <tbody >
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


<!-- page script -->
<script>
    $(document).ready(function() {
        //加载数据
        getData();

    });

    // 加载数据
    function getData(){
        var table = $('#cardsList').DataTable({
            "destroy": true,   //可以重新初始化，用于搜索
            "lengthChange": false,
            "ordering": false,   //排序
            "info": true,		   //
            "autoWidth": false,   //宽度自动
            "paging": true,      //分页
            "searching": false,  //全局搜索关闭
            "processing": true,  //开启显示‘正在加载.../processing’
            "serverSide":true,    //true代表后台处理分页，false代表前台处理分页
            "ajax" :  {
                url:"/card/getCardList",
                type:"POST",
                data:{
                    key : $("#searchKey").val(),
                    status : $("#status").val()
                },
                dataSrc: function (myJson) {
                    return myJson.data.data;
                }
            },
            //参数显示
            "columns": [
                {"data": "cardNum", 'sClass': "text-center",'width': '10%'},
                {"data": "bankName", 'sClass': "text-center",'width': '10%'},
                {"data": "type", 'sClass': "text-center",'width': '6%',
                    "render":function( data, type, full, meta) {
                       var str;
                       if(data == 0){
                           str = "信用卡";
                       }else if(data == 1){
                           str = "储蓄卡";
                       }else if(data == 2){
                           str = "支付宝";
                       }
                       return str;
                    }
                },
                {"data": "partyName", 'sClass': "text-center",'width': '7%'},
                {"data": "account", 'sClass': "text-center",'width': '8%'},
                {"data": "backDay", 'sClass': "text-center",'width': '7%',
                    "render":function( data, type, full, meta) {
                        if(data != 0){
                            return "每月"+ data +"号";
                        }else{
                            return "无";
                        }
                    }
                },
                {"data": "paymentDay", 'sClass': "text-center",'width': '7%',
                    "render":function( data, type, full, meta) {
                    if(full.type == 0){
                        return "每月"+ data +"号";
                    }else{
                        return "无";
                    }
                    }
                },
                // {"data": "email", 'sClass': "text-center",'width': '12%'},
                // {"data": "emailPwd", 'sClass': "text-center",'width': '8%'},
                // {"data": "emailPwdSelf", 'sClass': "text-center",'width': '8%'},
                {"data": "status", 'sClass': "text-center",'width': '4%',
                    "render":function( data, type, full, meta) {
                        var str = "";
                        if(data == 0){
                            str += "<span class='label label-success' style='padding-left:3px;padding-right:3px;padding-top: inherit;' >已绑定</span> ";
                        }else if(data == 1){
                            str += "<span class='label label-danger' style='padding-left:3px;padding-right:3px;padding-top: inherit;' >已解绑</span> ";
                        }
                        return str;
                    }
                },
                {"data": "payStatus", 'sClass': "text-center",'width': '4%',
                    "render":function( data, type, full, meta) {
                        var str = "";
                        if(data == 0){
                            if (full.payError == 1) {
                                str += "<span class='label label-warning' style='padding-left:3px;padding-right:3px;padding-top: inherit;' >支付异常</span> ";
                            } else {
                                str += "<span class='label label-success' style='padding-left:3px;padding-right:3px;padding-top: inherit;' >正常</span> ";
                            }
                        }else if(data == 1){
                            str += "<span class='label label-danger' style='padding-left:3px;padding-right:3px;padding-top: inherit;' >不可支付</span> ";
                        }
                        return str;
                    }
                },
                {"data": "createTime", 'sClass': "text-center",'width': '11%',
                    "render":function( data, type, full, meta) {
                        return toDate(data).format('yyyy-MM-dd HH:mm:ss');
                    }
                },
                {"data": "id" , 'sClass': "text-center" ,'width':'5%',
                    "render": function (data, type, full, meta ) {
                        var str = "<a href = '#' title='查看消费记录' onclick=viewCardCostDetail(" + data +");><i class='\glyphicon glyphicon-eye-open'></i></a>&nbsp;&nbsp;&nbsp;";
                        str += "<a href = '#' title='查看月度账单' onclick=viewCardMonthDetail(" + data +");><i class='\glyphicon glyphicon-record'></i></a>&nbsp;&nbsp;&nbsp;";
                        return str;
                    }
                }
            ],

            //是否开启主题
            "bJQueryUI": true,
            "oLanguage": {    // 语言设置
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "抱歉， 没有找到",
                "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                "sInfoEmpty": "没有数据",
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "sZeroRecords": "没有检索到数据",
                "sSearch": "检索:",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "前一页",
                    "sNext": "后一页",
                    "sLast": "尾页"
                }
            }
        });
    }
    //查看消费记录详情
    function viewCardCostDetail(id) {
        var table = $('#cardCostList').DataTable({
            "destroy": true,   //可以重新初始化，用于搜索
            "lengthChange": false,
            "ordering": false,   //排序
            "info": true,		   //
            "autoWidth": false,   //宽度自动
            "paging": true,      //分页
            "searching": false,  //全局搜索关闭
            "processing": true,  //开启显示‘正在加载.../processing’
            "serverSide":true,    //true代表后台处理分页，false代表前台处理分页
            "ajax" :  {
                url:"/card/getCardCostRecord",
                type:"post",
                data:{
                    cardId : id
                },
                dataSrc: function (myJson) {
                    return myJson.data.data;
                }
            },
            //参数显示
            "columns": [
                {"data": "billYearMonth", 'sClass': "text-center",'width': '6%'},
                {"data": "cardSuffix", 'sClass': "text-center",'width': '7%'},
                {"data": "transDate", 'sClass': "text-center",'width': '6%'},
                {"data": "transTime", 'sClass': "text-center",'width': '6%'},
                {"data": "transAmount", 'sClass': "text-center",'width': '7%'},
                {"data": "transDesc", 'sClass': "text-center",'width': '13%'},
                {"data": "postDate", 'sClass': "text-center",'width': '6%'},
            ],
            //是否开启主题
            "bJQueryUI": true,
            "oLanguage": {    // 语言设置
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "抱歉， 没有找到",
                "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                "sInfoEmpty": "没有数据",
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "sZeroRecords": "没有检索到数据",
                "sSearch": "检索:",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "前一页",
                    "sNext": "后一页",
                    "sLast": "尾页"
                }
            }
        });
        $("#cardCostDialog").modal("show");
    }

    //查看月度账单
    function viewCardMonthDetail(id) {
        var table = $('#cardMonthList').DataTable({
            "destroy": true,   //可以重新初始化，用于搜索
            "lengthChange": false,
            "ordering": false,   //排序
            "info": true,		   //
            "autoWidth": false,   //宽度自动
            "paging": true,      //分页
            "searching": false,  //全局搜索关闭
            "processing": true,  //开启显示‘正在加载.../processing’
            "serverSide":true,    //true代表后台处理分页，false代表前台处理分页
            "ajax" :  {
                url:"/card/getCardMonthRecord",
                type:"post",
                data:{
                    cardId : id
                },
                dataSrc: function (myJson) {
                    return myJson.data.data;
                }
            },
            //参数显示
            "columns": [
                {"data": "billYearMonth", 'sClass': "text-center",'width': '6%'},
                {"data": "statementCycle", 'sClass': "text-center",'width': '12%'},
                {"data": "creditLimit", 'sClass': "text-center",'width': '7%'},
                {"data": "newBalance", 'sClass': "text-center",'width': '8%'},
                {"data": "minPayment", 'sClass': "text-center",'width': '8%'},
                {"data": "paymentDate", 'sClass': "text-center",'width': '10%'}
            ],
            //是否开启主题
            "bJQueryUI": true,
            "oLanguage": {    // 语言设置
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "抱歉， 没有找到",
                "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                "sInfoEmpty": "没有数据",
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "sZeroRecords": "没有检索到数据",
                "sSearch": "检索:",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "前一页",
                    "sNext": "后一页",
                    "sLast": "尾页"
                }
            }
        });
        $("#cardMonthDialog").modal("show");
    }

</script>
</body>
</html>
